<template>
    <div class="app-container">
      <!-- app-container -->
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item label="" prop="">
            <el-input v-model="queryParams.keywords" placeholder="购买用户\联系方式\交易单号" clearable style="width: 300px" />
          </el-form-item>
          <el-form-item label="品牌：" prop="">
            <el-select v-model="queryParams.brandId" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="dict in brandList" :key="dict.id" :label="dict.value" :value="dict.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态：" prop="">
            <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="dict in statusList" :key="dict.id" :label="dict.value" :value="dict.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="交易时间：" prop="">
            <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="listBox">
        <!-- <div class="listBox_head">
          <export-excel-button title="商品兑换订单" :size="'small'" action="/customer/change/order/export"
            :params="ExportParams" />
        </div> -->
        <el-table v-loading="loading" :data="tabList" stripe border>
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="订单状态" align="center" prop="status" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <dict-tag :options="statusList" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="交易单号" align="center" prop="orderSn" :show-overflow-tooltip="true" />
          <el-table-column label="品牌" align="center" prop="brandName" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="商品名称" align="center" prop="orderTitle" :show-overflow-tooltip="true" />
          <el-table-column label="用户" align="center" prop="nickName" width="160" />
          <el-table-column label="联系方式" align="center" prop="phone" :show-overflow-tooltip="true" />
          <el-table-column label="单价(￥)" align="center" prop="orderPrice" :show-overflow-tooltip="true" />
          <el-table-column label="实付金额(￥)" align="center" prop="payPrice" :show-overflow-tooltip="true" width="120" />
          <el-table-column label="佣金(￥)" align="center" prop="jtkShareFee" :show-overflow-tooltip="true" />
          <el-table-column label="发放比例" align="center" prop="grantValue" width="240px" />
          <el-table-column label="赠送积分" align="center" prop="giveAmount" />
           <el-table-column label="下单时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
          <el-table-column label="付款时间" align="center" prop="payTime" :show-overflow-tooltip="true" />
          <el-table-column label="更新时间" align="center" prop="modifiedTime" :show-overflow-tooltip="true" />
        </el-table>
  
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </div>
    </div>
  </template>
  
  <script>
    import {
      jtkOrderList,
    } from "@/api/integralOperation/jtkConfiguration";
    import ExportExcelButton from "@/components/ExportExcelButton/index";
    export default {
      // dicts: ['equity_card_issue_type', 'equity_card_sell_status'],
      name: "",
      components: {
        ExportExcelButton
      },
      data() {
        return {
          //日期
          date: [],
          // 遮罩层
          loading: false,
          // 导出遮罩层
          exportLoading: false,
          // 总条数
          total: 0,
          // 表格数据
          tabList: [],
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            keywords: '', //购买用户/联系方式/交易单号
            brandId: '',//品牌id jutuike_union_orders_brand
            beginTime: '', //下单开始时间
            endTime: '', //下单结束时间
            status:'',//订单状态 
          },
          options: [], //兑换类型下拉
          payTypeList: [],
          statusList:[],//订单状态下拉
          brandList: [],
        };
      },
      computed: {
        ExportParams() {
          const params = {
            ...this.queryParams,
          };
          return params;
        },
      },
      created() {
        this.getDict();
        this.getList();
      },
      methods: {
        //获取状态字典
        getDict() {
          var dictType = "jutuike_orders_status,jutuike_union_orders_brand";
          this.$getSelectList(dictType)
            .then((res) => {
              var arr = [{
                id: "",
                value: "全部",
              }, ];
              this.statusList = res.result[0].dictList
              this.brandList = res.result[1].dictList
            })
            .finally(() => {
              this.loading = false;
            });
        },
        /** 查询列表 */
        getList() {
          this.loading = true;
          jtkOrderList(this.queryParams).then(response => {
            this.tabList = response.result.records;
            this.total = response.result.total;
            this.tabList = this.tabList.map(item => {
              // console.log('item',item)
              Object.keys(item).forEach(key => {
                if (item[key] === '') {
                  item[key] = '-'
                }
              })
              return item
            })
            this.loading = false;
          });
        },
        // 表单重置
        reset() {
          this.date = []
          this.queryParams = {
            pageNum: 1,
            pageSize: 10,
            keywords: '', //购买用户/联系方式/交易单号
            brandId: '',//品牌id jutuike_union_orders_brand
            beginTime: '', //下单开始时间
            endTime: '', //下单结束时间
            status:'',//订单状态 
          }
          // this.resetForm("form");
          this.handleQuery()
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.beginTime = this.date[0];
          this.queryParams.endTime = this.date[1];
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          // this.resetForm("queryForm");
          this.reset();
        },
       
      }
    };
  
  </script>
  <style scoped>
    .head {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px 0;
    }
  
    .listBox {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px;
      margin-top: 10px;
    }
  
    .listBox_head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20px;
    }
  
  </style>
  